<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-{{include.col_size_label}} control-label" for="{{include.id_blueprintname}}">Blueprint Name</label>
    <div class="col-sm-{{include.col_size_field}}">
      <input type="text" id="{{include.id_blueprintname}}" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-{{include.col_size_label}} control-label" for="{{include.id_catalog}}">Catalog</label>
    <div class="col-sm-{{include.col_size_field}}">
      <input type="text" id="{{include.id_catalog}}" class="form-control"></div>
  </div>
  <div class="form-group">
    <label class="col-sm-{{include.col_size_label}} control-label" for="{{include.id_number}}">Number</label>
    <div class="col-sm-{{include.col_size_field}}">
      <input type="text" id="{{include.id_number}}" class="form-control"></div>
  </div>

  <fieldset class="fields-section-pf" id="{{include.id_fieldsection}}">
    <legend class="fields-section-header-pf">
      <span class="fa fa-angle-right fa-angle-down field-section-toggle-pf"></span>
      <a href="#{{include.id_fieldsection}}" class="field-section-toggle-pf">Advanced Options</a>
    </legend>
    <div class="form-group">
      <label class="col-sm-{{include.col_size_label}} control-label" for="{{include.id_entry1}}">Entry Point 1</label>
      <div class="col-sm-{{include.col_size_field}}">
        <input type="text" id="{{include.id_entry1}}" class="form-control"></div>
    </div>
    <div class="form-group">
      <label class="col-sm-{{include.col_size_label}} control-label" for="{{include.id_entry2}}">Entry Point 2</label>
      <div class="col-sm-{{include.col_size_field}}">
        <input type="text" id="{{include.id_entry2}}" class="form-control"></div>
    </div>
    <div class="form-group">
      <label class="col-sm-{{include.col_size_label}} control-label" for="{{include.id_entry3}}">Entry Point 3</label>
      <div class="col-sm-{{include.col_size_field}}">
        <input type="text" id="{{include.id_entry3}}" class="form-control"></div>
    </div>
  </fieldset>

  {% if include.is_modal == false %}
  <div class="form-group">
    <div class="col-sm-offset-{{include.col_size_label}} col-sm-{{include.col_size_field}}">
      <button type="submit" class="btn btn-primary">Save</button>
      <button type="submit" class="btn btn-default">Cancel</button>
    </div>
  </div>
  {% endif %}
  {% if include.is_modal == true %}
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    <button type="button" class="btn btn-primary">Save</button>
  </div>
  {% endif %}


</form>

<script>
  // Initialize form
  $(document).ready(function() {
    // set default state to collapsed for expandable field section
    $('.fields-section-header-pf').attr('aria-expanded', 'false');
    $('.fields-section-pf .form-group').addClass('hidden');
    $('.fa.field-section-toggle-pf').removeClass('fa-angle-down');

    // click the field section heading to expand the section
    $("#{{include.id_fieldsection}} .field-section-toggle-pf").click(function(event){
      event.preventDefault();
      $(this).parents(".fields-section-pf").find(".fa").toggleClass("fa-angle-down");
      $(this).parents(".fields-section-pf").find(".form-group").toggleClass("hidden");
      if ($(this).parent().attr('aria-expanded') == 'false') {
        $(this).parent().attr('aria-expanded', 'true');
      } else {
        $(this).parent().attr('aria-expanded', 'false');
      }
    })

  });

</script>
